<template>
  <van-field
    v-if="h5"
    :key="isDetail"
    v-model="fieldModel"
    type="textarea"
    :name="item.options && item.options.name"
    :label="item.options && item.options.label"
    :disabled="item.options && item.options.disabled"
    :readonly="isDetail || designer || (item.options && item.options.readonly)"
    :placeholder="isDetail ? '' : item.options && item.options.placeholder"
    :maxlength="(item.options && item.options.maxlength) || null"
    :rows="isDetail ? 1 : item.options && item.options.rows"
    :show-word-limit="item.options && !isDetail && item.options.showWordLimit"
    :autosize="autosize"
    :required="item.options && !isDetail && item.options.required"
    :rules="isDetail ? [] : rules"
    :border="false"
    :label-width="item.options?.labelPosition === 'top' ? '100%' : undefined"
    :label-align="(item.options && item.options.labelPosition) || undefined"
    :input-align="(item.options && item.options.inputAlign) || undefined"
    autocomplete="off"
  >
    <template v-if="isDetail" #input>
      <van-text-ellipsis
        v-if="fieldModel"
        :content="fieldModel"
        :rows="item.options.ellipsis || 3"
        :expand-text="item.options.expandTips || '展开'"
        :collapse-text="item.options.retractTips || '收起'"
      />
    </template>
  </van-field>
  <widget-form-item
    v-else
    :designer="designer"
    :widget-list="widgetList"
    :item="item"
    :rules="isDetail ? [] : rules"
    :index="index"
    :show-message="!isDetail"
  >
    <el-input
      v-if="!isDetail"
      v-model="fieldModel"
      type="textarea"
      :disabled="item.options && item.options.disabled"
      :readonly="designer || (item.options && item.options.readonly)"
      :placeholder="item.options && item.options.placeholder"
      :maxlength="item.options && item.options.maxlength"
      :rows="item.options && item.options.rows"
      :show-word-limit="(item.options && item.options.showWordLimit) || true"
      :autosize="autosize"
    />
    <div v-else>{{ fieldModel }}</div>
  </widget-form-item>
</template>

<script>
import { ref, computed } from 'vue'
import props from './props'
import field from './field'

export default {
  name: 'MTextarea',
  props,
  emits: ['update:modelValue'],
  setup(props, { emit }) {
    const autosize = computed(() => {
      if (props.h5) {
        return props.item.options.autosize
      }
      if (props.item.options.autosize) {
        return { minRows: props.item.options.rows, maxRows: 7 }
      }
      return false
    })

    return {
      autosize,
      ...field(props, emit)
    }
  }
}
</script>
